<!--
	作者：offline
	时间：2018-10-17
	描述：差异调整申请(实物对账单列表)
-->

<template>
	<div class="m-view-goodsAccountBill2 m-window" id="accAuditApp">
		<!--查询条件-->
		<div class="m-condition" v-if="diaShow">
			<el-row :gutter="10">
				<el-form
					:model="ruleForm"
					ref="ruleForm"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="7">
						<el-form-item label="公司" class="rightItem">
							<el-select
								v-model="selCompanyCode"
								value-key="companyCode"
								:placeholder="com_sel"
								@change="companyChange"
								ref="content"
								filterable
							>
								<el-option
									v-for="item in comOptions"
									:key="item.id"
									:label="item.companyName"
									:value="item"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
                    <el-col :span="6">
						<el-form-item label="申请日期" class="rightItem">
							<el-date-picker
								v-model="applySDate"
								type="date"
								placeholder="开始日期"
								value-format="yyyy-MM-dd"
								:editable="false"
								:picker-options="po1"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-date-picker
							v-model="applyEDate"
							type="date"
							placeholder="结束日期"
							value-format="yyyy-MM-dd"
							:editable="false"
							:picker-options="po2"
						></el-date-picker>
					</el-col>
					<el-col :span="6">
						<el-form-item label="对账单号" class="rightItem">
							<el-input v-model="accountNo" placeholder="请输入单号" @keyup.enter.native="search" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<el-row :gutter="10">
				<el-form
					:model="ruleForm"
					ref="ruleForm"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
                    <el-col :span="7">
						<el-form-item label="供应商" class="rightItem">
							<el-input
								placeholder="请选择供应商"
								v-model="selCusName"
								clearable
								v-if="sup_sel_show"
								readonly
								@focus="showSupplierDialog"
								@mouseenter.native="mouseEnter"
								@mouseleave.native="mounseLeave"
							>
								<el-button slot="append" icon="el-icon-search" @click="showSupplierDialog"></el-button>
								<span slot="suffix" @click="inputClearSon" class="m-cleanInput" v-show="inputClearBut">
									<i class="el-input_icon el-icon-circle-close el-input__clear"></i>
								</span>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="componentShow">
						<el-form-item label="单据状态" class="rightItem">
							<el-select v-model="state" placeholder="单据状态" value-key="value" @change="changeOp">
								<el-option
									v-for="item in recOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-form>
				<el-col :span="2" :offset="7">
					<el-button type="primary" @click="search" :disabled="btnDis">查询</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="edit">浏览</el-button>
				</el-col>
			</el-row>
		</div>
		<!--供应商选择-弹框-->
		<el-dialog
			title="供应商信息"
			:visible.sync="srmSupplierDialogVisible"
			width="50%"
			:before-close="srmSupplierDialogClose"
			v-dialogDrag
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<srmSupplierInfo ref="srmSupplierInfo" :layout="layout" @setSrmSupplierInfo="setSrmSupplierInfo"></srmSupplierInfo>
			<!--@setSapSupplierCompanyInfo="getSelectedCompany" :setSelectedSupplierCode="getSelectedSupplierCode"-->
		</el-dialog>
		<!--表格、实物对账单列表-->
		<div class="m-agTable m-top2 m-bottom" v-if="diaShow">
			<ag-grid-vue
				class="m-agTableContent ag-theme-balham"
				:gridOptions="gridOptions"
				:columnDefs="columnDefs"
				:rowData="rowData"
				v-loading="loading"
				rowSelection="single"
			></ag-grid-vue>
		</div>
		<div class="m-page" v-if="diaShow">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				@prev-click="handlePrevClick"
				@next-click="handleNextClick"
				:current-page="currentPage"
				:page-sizes="[30,50,100,150,200]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>
		<!--浏览实物对账单-->
		<div class="m-window" v-if="goodsAccountInfo_Show">
			<goodsAccountInfo @cancelComponents="cancelComponents" :goodsAccInfo="goodsAccInfo"></goodsAccountInfo>
		</div>
	</div>
</template>

<style lang="less">
.m-view-goodsAccountBill2 {
	.m-agTableModel {
		height: 300px;
	}
}
</style>

<script>
import _Api from "@/api";
import localeText from "@/i18n/agGridText";
import supplierInfo from "@/public/supplierInfo.js";//获取供应商信息
import goodsAccountInfo from "@/views/purchase/goodsAccountInfo.vue";
import srmSupplierInfo from "@/components/srmSupplierInfo.vue";
export default {
	data () {
		return {
			ruleForm: {},
			btnDis: true,
			selCusCode: "",//供应商
			selCusName: "",
			cusOptions: [],
			selCompanyCode: "",//公司
			comOptions: [],
			accountNo: "",//单号
			applySDate: "",
			applyEDate: "",
			state: 2,//单据状态
			recOptions: [
				{ value: 2, label: "未确认" },
				{ value: 3, label: "已确认" }],
			rowData: [],
			columnDefs: [],
			loading: false,
			dialogVisible: false,
			sup_sel_show: true,//供应商选项
			com_sel: "请选择公司",
			componentShow: true,
			supplierInfo: "",
			supplierName: "",
			diaShow: true,
			goodsAccountInfo_Show: false,
			goodsAccInfo: {},
			srmSupplierDialogVisible: false,
			layout: {},
			inputClearBut: false,
			currentPage: 1,
			pageSize: 30,
			total: 0,
			current: 1,
			po1: {
				disabledDate: this.disabledDate1
			},
			po2: {
				disabledDate: this.disabledDate2
			}
		}
	},
	beforeMount () {
		//实物对账单列表-表格属性
		this.gridOptions = {
			context: {
				componentParent: this
			},
			rowSelection: "single",
			enableColResize: true,
			localeText: localeText,
			suppressRowClickSelection: true
		};
		//表格列
		this.columnDefs = [
			{
				headerName: "实物对账单号",
				field: "gooAccNo",
				width: 180,
				checkboxSelection: true,
				headerCheckboxSelection: true,
				headerCheckboxSelectionFilteredOnly: true,
				cellRenderer: singleClickEditRenderer,
				sort: 'desc'
			},//checkboxSelection: true,headerCheckboxSelection: true
			{ headerName: "公司", field: "companyName", width: 200 },
			{ headerName: "供应商", field: "supplierName", width: 200 },
			{ headerName: "对账金额", field: "amount", width: 100 },
			{ headerName: "申请人", field: "creator", width: 100 },
			{
				headerName: "申请日期",
				field: "createDate",
				width: 100,
				cellRenderer: function (params) {
					if (params.value)
						return new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy-MM-dd");
				}
			},
			{ headerName: "确认人", field: "confirmer", width: 100 },
			{
				headerName: "确认日期",
				field: "confirmDate",
				width: 100,
				cellRenderer: function (params) {
					if (params.value)
						return new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy-MM-dd");
				}
			},
			{				headerName: "单据状态", field: "billState", width: 100, cellRenderer: function (params) {
					if (params.value == "2")
						return '<span class="ag-icon">未确认</span>';
					else if (params.value == "3")
						return '<span class="ag-icon">已确认</span>';
				}
			}
		];
		let tips = ['companyName', 'supplierName', 'matName', 'creator']
		this.columnDefs.forEach(col => {
			if (tips.indexOf(col.field) > -1) {
				col.tooltipField = col.field
			}
		})
	},
	methods: {
		disabledDate1 (time) {
			if (this.applyEDate)
				return time.getTime() > new Date(this.applyEDate).getTime();
		},
		disabledDate2 (time) {
			if (this.applySDate)
				return time.getTime() < (new Date(this.applySDate).getTime() - 3600 * 1000 * 24);
		},
		handleSizeChange (params) {
			this.current = 1;
			this.currentPage = 1;
			this.pageSize = params;
			this.search()
		},
		handleCurrentChange (params) {
			this.current = params;
			this.currentPage = params;
			this.search()
		},
		handlePrevClick (params) {
			this.current = params;
			this.currentPage = params;
		},
		handleNextClick (params) {
			this.current = params;
			this.currentPage = params;
		},
		//公司选项变化事件
		companyChange (value) {
			if (value) {
				var obj = {};
				obj.com_code = value.companyCode;//.companyCode
				this.layout.companyCode = value.companyCode;//.companyCode
				this.layout.auth = true;
				// var that = this;
				//根据公司获取相应的供应商
				//					_Api.getAuthSupplierByCompanyCode(obj).then(function(response){
				//						var data = response.data;
				//						if(data.code == "1"){
				//							if(data.total > 0)
				//								that.cusOptions = data.rows;
				//							else
				//								that.cusOptions = [];
				//						}
				//					}).catch(()=>{
				//						that.$alert(err.data.message ,{
				//							showClose:false,
				//							confirmButton:"确定",
				//							customClass:"alertFailure"
				//						});
				//						that.cusOptions = [];
				//					})
			}
			else {
				this.getAuthInfo();
				this.layout = {};
			}
		},
		//供应商选择-弹框
		showSupplierDialog () {
			var that = this;
			if (!this.layout.companyCode) {
				this.$alert("提示：请选择公司！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				this.$refs.content.focus();
				return;
			} else {
				this.srmSupplierDialogVisible = true;
				this.$nextTick(_ => {
					that.$refs.srmSupplierInfo.search();
				});
			}
		},
		mounseLeave () {
			if (this.selCusName != "")
				this.inputClearBut = false;
		},
		mouseEnter () {
			if (this.selCusName != "")
				this.inputClearBut = true;
		},
		inputClearSon () {
			this.selCusCode = "";
			this.selCusName = "";
			this.inputClearBut = false;
		},
		setSrmSupplierInfo (msg) {
			if (msg.length > 0) {
				this.srmSupplierDialogVisible = false;
				this.selCusCode = msg[0].id;
				this.selCusName = msg[0].supplierName;
				// this.inputClearBut = true;
			}
		},
		srmSupplierDialogClose (done) {
			done();
		},
		changeOp (value) {//选择单据状态
			if (value == 2) {//未确认
				this.upload_show = true;
			}
			// else//通过
			// {

			// }
			this.search();
		},
		//查询方法
		search () {
			//判断公司选项是否为空
			if (this.selCompanyCode == "") {
				this.$alert("请选择公司", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			var obj = {};
			//供应商Id
			if (this.$global.user.userTypeId == "4") {
				obj.userType = 2;//供应商用户
				obj.supplierId = this.supplierInfo[0];
			}
			else {
				obj.userType = 1;//内部用户
				if (this.selCusCode != "")
					obj.supplierId = this.selCusCode;
			}
			//公司Id
			if (this.selCompanyCode)
				obj.companyId = this.selCompanyCode.id;
			//实物对账单号	
			if (this.accountNo)
				obj.gooAccMxMsgId = this.accountNo;
			//开始日期、结束日期
			if (this.applySDate)
				obj.begin_date = this.applySDate;
			else if (!this.applySDate && this.applyEDate)
				obj.begin_date = this.applyEDate;
			if (this.applyEDate)
				obj.end_date = this.applyEDate;
			else if (!this.applyEDate && this.applySDate)
				obj.end_date = this.applySDate
			//单据状态
			obj.billState = this.state;
			obj.current = this.current;
			obj.size = this.pageSize;
			var that = this;
			this.loading = true;
			_Api.getMyGoodList(obj).then(function (response) {
				var data = response.data;
				that.loading = false;
				if (data.code == "1") {
					if (data.total > 0) {
						that.total = data.total;
						that.gridOptions.api.setRowData(data.rows);
					}
					else {
						that.gridOptions.api.setRowData([]);
						that.total = 0;
						that.current = 1;
					}
				} else {
					that.$alert(data.info, {
						showClose: false,
						confirmButton: "确定",
						customClass: "alertFailure"
					});
					that.total = 0;
					that.current = 1;
				}
			}).catch((err) => {
				that.loading = false;
				that.total = 0;
				that.current = 1;
				that.$alert(err.data.message, {
					showClose: false,
					confirmButton: "确定",
					customClass: "alertFailure"
				});
			})
		},
		edit () {
			console.log("浏览");
			var row = this.gridOptions.api.getSelectedRows();
			//清空
			// var that = this;
			this.$nextTick(_ => {
				//					that.$refs.ruleForm.clearValidate();
			});

			if (row.length <= 0) {
				this.$alert("请选择一张想浏览的实物对账单！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"				});
				return;
			}
			else if (row.length > 1) {
				this.$alert("只能选择一张想浏览的实物对账单！", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			else {
				//					this.ruleForm = row[0];
				//	            	this.title="";
				//					this.mode="";
				//					this.dialogVisible = true;
				this.diaShow = false;
				this.goodsAccountInfo_Show = true;
				this.goodsAccInfo = row[0];
				//					if (this.state == 2)//未确认
				//					{
				//						var that = this;
				//						var obj = {};
				//						obj.gooAccNo = this.ruleForm.gooAccNo;
				//						_Api.getGoodsDetails(obj).then(function(response){
				//							var data = response.data;
				//							if (data.code == 1)
				//							{
				//								if (data.total>=0)
				//								{
				//									that.gD_total.api.setRowData(data.rows.m_StorageTotal);
				//									that.gD_total_loading = false;
				//									
				//									that.gD_info.api.setRowData(data.rows.m_StorageDetail);
				//									that.gD_info_loading = false;
				//									
				//								}
				//							}
				//						})
				//					}
				//					else if(this.state == 3)//已确认
				//					{	
				//						
				//					}

			}
		},
		//获取当前账号权限公司
		getAuthInfo () {
			var obj = {};
			if (this.$global.user.userTypeId == 4) {
				obj.account = this.$global.user.userName;
				obj.userType = 2;
			}
			else if (this.$global.user.userTypeId == 1) {
				obj.account = this.$global.user.oaNum;
				obj.userType = 1;
			}
			var that = this;
			_Api.getAuthInfo(obj).then(function (response) {
				var data = response.data;
				if (data.code == "1") {
					that.btnDis = false;
					that.comOptions = data.rows.myMstCompany;
					that.cusOptions = data.rows.myMstSupplier;
				} else {
					that.comOptions = [];
					that.cusOptions = [];
				}
			}).catch((err) => {
				that.$alert(err.data.message, {
					showClose: false,
					confirmButton: "确定",
					customClass: "alertFailure"
				});
				that.comOptions = [];
				that.cusOptions = [];
			})
		},
		setClickValue (value) {
			//				this.$emit('goodsAccInfo',value);
			this.goodsAccInfo = value;//父组件传值给子组件
			this.diaShow = false;
			this.goodsAccountInfo_Show = true;
		},
		handleClose (done) {
			// var that = this;
			this.$nextTick(_ => {
				//					that.$refs.Adjust_ruleForm.clearValidate();
			});
			done();
			this.search();
		},
		cancelComponents (msg) {
			if (msg) {
				this.goodsAccountInfo_Show = false;
				this.diaShow = true;
				if (this.selCompanyCode) {
					this.search();
				}
			}
		},
	},
	mounted () {
		this.getAuthInfo();
		//判断用户类型，修改查询条件
		if (this.$global.user.userTypeId == 4)//供应商
		{
			this.com_sel = "请选择客户"
			this.sup_sel_show = false;
			var that = this;
			supplierInfo.getUserInfo(this.$global.user.userName).then((supplierInfo) => {
				that.supplierInfo = supplierInfo;
			})
			//					this.recOptions.splice(3,1);
		}
		else//公司
		{
			this.com_sel = "请选择公司";
			this.sup_sel_show = true;
			//					this.recOptions.splice(3,1);
			//					this.recOptions.splice(0,1);
		}
	},
	components: {
		goodsAccountInfo,
		srmSupplierInfo
	},
	watch: {
		accountNo (val) {
			if (val)
				this.current = 1;
			else
				this.current = this.currentPage;
		},
		state () {
			this.current = 1;
		},
		selCompanyCode () {
			this.current = 1;
			this.search();
		},
		applySDate (val) {
			if (val == null)
				this.applySDate = "";
			this.current = 1;
		},
		applyEDate (val) {
			if (val == null)
				this.applyEDate = "";
			this.current = 1;
		}
	}

}

function singleClickEditRenderer () { }
singleClickEditRenderer.prototype.init = function (params) {
	var template =
		'<span><button id="theValue" class="rendererClass">' + params.value + '</button></span>';
	var tempDiv = document.createElement("div");
	tempDiv.innerHTML = template;
	this.eGui = tempDiv.firstElementChild;

	this.params = params;
	this.eValue = this.eGui.querySelector("#theValue");
	this.eValue.innerHTML = params.value;
	// this.eButton = this.eGui.querySelector("#theButton");
	this.buttonClickListener = this.onButtonClicked.bind(this);
	this.eValue.addEventListener("click", this.buttonClickListener);
}

singleClickEditRenderer.prototype.onButtonClicked = function (event) {
	// var value =this.params.value;
	accAuditApp.__vue__.setClickValue(this.params.data);
}

singleClickEditRenderer.prototype.createGui = function () {
}

singleClickEditRenderer.prototype.getGui = function () {
	return this.eGui;
}

singleClickEditRenderer.prototype.afterGuiAttached = function () {
}

singleClickEditRenderer.prototype.destroy = function () {
}

singleClickEditRenderer.prototype.isPopup = function () {
	return false;
}
</script>